<template>
  <div class="container">
    <view class="status-bar">
      <image
        @tap="back"
        class="back"
        src="../../static/back.png"
      />
      名师简介
    </view>

    <!-- 信息 -->
    <view class="information">
      <image
        mode="aspectFit"
        :src="teacherMsg.teacherPicture"
      />
      <view class="info">
        <view class="name">{{teacherMsg.teacherName}}</view>
        <view>年龄：{{teacherMsg.teacherAge}}</view>
        <view>性别：{{teacherMsg.teacherSex ? '男' : '女'}}</view>
        <view>微信：{{teacherMsg.teacherWechat}}</view>
        <view>电话：{{teacherMsg.teacherPhone}}</view>
      </view>
    </view>

    <!-- 简介 -->
    <view class="introduction">
      <view class="title">名师简介：</view>
      <view class="content">{{teacherMsg.teacherIntroduction}}</view>
    </view>

    <!-- 免费在线试听 -->
    <view
      class="free-listen"
      v-if="teacherMsg.compositions && teacherMsg.compositions.length"
    >
      <view class="title">免费在线试听：</view>
      <view
        @tap="play(item)"
        class="button"
        v-for="(item, i) in teacherMsg.compositions"
        :key="i"
      >{{item.compositionName}}
      </view>
    </view>

    <tui-modal
      :show="isPlay"
      @cancel="hide"
      :custom="true"
      padding="0rpx 0rpx"
      :width="current.type === 1 ? '100%' : '84%'"
      radius="0"
    >
      <luch-audio
        v-if="isPlay && current.type === 2"
        style="width: 100%"
        :src="current.src"
        :name="current.name"
        :author="current.author"
        :play.sync="audioPlay"
      ></luch-audio>
      <chimee-player
        v-if="isPlay && current.type === 1"
        :src="current.src"
      ></chimee-player>
    </tui-modal>
  </div>
</template>

<script>
import chimeePlayer from "@/components/chimee-player";
import luchAudio from "@/components/luch-audio/luch-audio.vue";
import tuiModal from "@/components/modal/modal";
export default {
  components: { chimeePlayer, luchAudio, tuiModal },
  data() {
    return {
      id: "",
      teacherMsg: {},
      current: {},
      isPlay: false,
      audioPlay: false,
      audioAction: {
        method: "pause"
      }
    };
  },
  onLoad(option) {
    console.log(option.id);
    this.id = option.id;
    this.getDetail();
  },
  methods: {
    back() {
      uni.redirectTo({
        url: "/pages/index/index"
      });
    },
    // 详情请求
    async getDetail() {
      let { data: res } = await this.$api.web_teacher_detail({ id: this.id });
      console.log(res);
      this.teacherMsg = res.data;
    },
    change() {
      console.log("触发动画");
    },
    hide() {
      this.isPlay = false;
    },
    // 开始试听
    play(item) {
      this.isPlay = !this.isPlay;
      this.audioPlay = this.isPlay;
      this.current.src = item.compositionUrl;
      this.current.name = item.compositionName;
      this.current.author = this.teacherMsg.teacherName;
      this.current.type = item.compositionType;
      // this.isPlay = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .status-bar {
    position: relative;
    .back {
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      left: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
    }
  }

  .information,
  .introduction,
  .free-listen {
    width: 710rpx;
    margin: 20rpx auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.17), 0 0 6px rgba(206, 128, 128, 0.09);
  }

  .information {
    display: flex;
    padding: 20rpx;
    image {
      width: 200rpx;
      height: 200rpx;
    }
    .info {
      font-size: 28rpx;
      color: #999;
      margin-left: 20rpx;
      .name {
        font-size: 36rpx;
        color: #006c67;
        font-weight: bold;
      }
    }
  }

  .introduction {
    padding: 20rpx;
    .title {
      font-size: 36rpx;
      color: #006c67;
      font-weight: bold;
    }

    .content {
      text-indent: 2em;
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #999;
    }
  }

  .free-listen {
    padding: 20rpx;
    .title {
      font-size: 36rpx;
      color: #006c67;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    .button {
      margin-top: 20rpx;
      margin-right: 20rpx;
      display: inline-block;
      padding: 0 20rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      background-image: linear-gradient(90deg, #006c67, #0abcb0);
      font-size: 28rpx;
      color: #fff;
      image {
        width: 44rpx;
        height: 44rpx;
      }
    }
  }

  .audio {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>